body {
      background-color: pink;

    background-image: linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px);
    background-size: 4vw 4vw;
    }
    :root { color-scheme: light; }
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; }
    body {
      overflow-x: hidden;
  overflow-y: auto;
      font-family: system-ui, sans-serif;
    }
    .petal-field {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      perspective: 900px;
      isolation: isolate;
    }
    .petal {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--size);
      height: var(--size);
      opacity: 0;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      animation: fall var(--duration) linear var(--delay) infinite;
    }
    .petal svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .10)) blur(var(--blur));
    }
    @keyframes fall {
      0% {
        opacity: 0;
        transform: translate3d(var(--x0), -12vh, 0) rotateZ(var(--rz0)) rotateY(var(--ry0));
      }
      8% { opacity: var(--opacity); }
      82% { opacity: var(--opacity); }
      100% {
        opacity: 0;
        transform: translate3d(var(--x1), 112vh, 0) rotateZ(var(--rz1)) rotateY(var(--ry1));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .petal { animation-play-state: paused; opacity: var(--opacity); }
      .petal:nth-child(even) { display: none; }
    }

header {
  z-index: 100;
    background-color: #ffb7c5;
    height: 10vh;
    position: absolute;
    top: 0;
    right: 0;
    width: 1%;
    border-radius: 0px 0 0 30px;
    box-sizing: border-box;

    border: 1px solid transparent;
    background:
        linear-gradient(#ec3750, #ec3750) padding-box,
        linear-gradient(
            120deg,
            #b8860b,
            #ffd700,
            #fff3a0,
            #d4af37,
            #fff8c5,
            #b8860b
        ) border-box;

    background-size: 100% 100%, 300% 100%;
    animation: goldGlitter 15s linear infinite;
}

@keyframes goldGlitter {
    0% {
        background-position: 0 0, 0% 50%;
    }

    100% {
        background-position: 0 0, 300% 50%;
    }
}

#tree {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 35vw;
    transition: 0.7s;
    pointer-events: visiblePainted;
    animation: treeani 1.8s;
}

#tree:hover {
  transform: translateX(3%);
}


#tree2 {
  z-index: 101;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: 0.7s;
    width: 60vw;
    animation: tree2ani 2s;
}


@keyframes tree2ani {
  from {
    top: -30vh;
    left: -30vw;
  }
}
@keyframes treeani {
  from {
    right: -30vw;
  }
}



#tree2:hover {
  transform: translateX(-1%) translateY(-1%);
}

#text {
  position: absolute;
  top: -10vh;
  right: 0px;
  text-size-adjust: 20vw;
  font-size: 10vw;
  font-family: "MyFont", sans-serif;
  color: #FFF8ED;

}

@font-face {
    font-family: "MyFont";
    src: url("font.ttf") format("truetype");
}

@font-face {
    font-family: "zara";
    src: url("zarathustra-v01.otf") format("opentype");
}

@font-face {
    font-family: "outfit";
    src: url("outfit.ttf") format("truetype");
}

#tex {
  position: absolute;
  top: 11vh;
  right: 16vw;
  height: 30%;
  width: 30vw;
}

#flower {
  width: 6vw;
  position: absolute;
  top: 7vh;
  left: -3vw;
}

body::selection {
  background-color: white;
  color: pink;
}


.signup {
    height: 20vh;
    width: 40vw;
    background-color: #ec3750;
    position: absolute;
    bottom: 20vh;
    left: 10vh;
    border-radius: 16px;
    z-index: 5;
}

/* White shadow */
.signup1 {
    height: 20vh;
    width: 40vw;
    background-color: #FFF8ED;
    position: absolute;
    bottom: 18vh;
    left: 11vh;
    border-radius: 16px;
    z-index: 4;
    transition: 0.3s;
}

.signup3 {
    height: 19vh;
    width: 39vw;
    position: absolute;
    bottom: 20.5vh;
    left: 11vh;
    border: 2px solid #FFF8ED;
    border-radius: 16px;
    z-index: 10;
    user-select: none;
    pointer-events: none;
}

/* Hover yellow card -> move white shadow */
.signup:hover + .signup1 {
    bottom: 18vh;
    left: 12vh;
}
#formsign {
  position: absolute;
  top: 40%;
  left: 5%;
}

input[type="email"] {
    width: 300px;
    height: 50px;
    font-size: 18px;
    padding-left: 5%;
    border-radius: 7px;
    border: 1px solid #00000077;
    padding-right: 5%;
    background-color: #FFF8ED;
    
}

input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #FFF8ED inset;
    -webkit-text-fill-color: black;
}

input[type="email"]:hover{
    background-color: #FFF8ED;

}

button[type="submit"] {
    width: 150px;
    height: 50px;
    font-size: 18px;
    background-color: white;
    outline: none;
    border: 1px solid #2a262677;
    border-radius: 7px;
}

button[type="submit"]:hover{
  cursor: pointer;
}


h1,h2,h3,p, button{
  font-family: "MyFont", sans-serif;

}

input[type="email"]::placeholder {
    font-family: "MyFont", sans-serif;
}

#stex {
  position: absolute;
  top: -100%;
  left: 3%;
  font-weight: 400;
  color: white;
}

#weare {
  position: absolute;
  bottom: 6vh;
  left: 8vw;
  font-size: large;
  color: black;
}

.yell {
  background-color: #ec3750 ;
  color: white;
  font-size: 25px;
}

.white {
  font-size: 25px;
  background-color: white;
}


#submit {
    width: 150px;
    height: 50px;
    font-size: 18px;
    background-color: #FFF8ED;
    outline: none;
    border: 1px solid #00000077;
    border-radius: 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    vertical-align: top;
}

#submit:hover {
  background-color: #FFF8ED;
}

img {
  user-select: none;

}

.hero {
  height: 100vh;
}


.logo {
    position: fixed;
    top: 1vh;
    right: 2vw;

    width: 12vw;
    height: auto;

    display: block;
    line-height: 0;

    z-index: 1000;
}

.logo svg {
    display: block;
    width: 100%;
    height: auto;
}


.logo svg path {
    pointer-events: visiblePainted;
}

.logo svg g {
    pointer-events: visiblePainted;
}

.logo svg g path {
    pointer-events: visiblePainted;
}

@font-face {
    font-family: "japan";
    src: url("japan.ttf") format("truetype");
}


#jan {
  position: absolute;
  top: 17vh;
  left: 0vw;
}

/* ==========================================================================
   Project marquee — two tilted, infinitely scrolling rows of project cards.
   Fully scoped to .pmq, so it can be dropped into any page.
   Tweak the variables below; nothing else needs editing.
   ========================================================================== */

.pmq {
  /* --- knobs --- */
  --pmq-card-w: 280px;      /* card width                                    */
  --pmq-card-h: 190px;      /* card height                                   */
  --pmq-gap: 18px;          /* space between cards                           */
  --pmq-speed: 45s;         /* one full loop; larger = slower                */
  --pmq-tilt: 7deg;         /* row rotation                                  */
  --pmq-band-h: 650px;      /* height of the whole band                      */
  --pmq-row-offset: 120px;  /* distance of each row from top / bottom edge   */
  --pmq-radius: 18px;       /* card corner radius                            */
  --pmq-fade: 14%;          /* width of the soft fade on each side           */

  position: relative;
  width: 100%;
  height: var(--pmq-band-h);
  overflow: hidden;
  background: transparent; /* inherits whatever the page background is */

  /* Fades the edges to transparent, so it works on any background colour.
     If you'd rather fade to a solid colour, delete these two lines and use
     the ::before / ::after gradients at the bottom of this file instead. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pmq-fade), #000 calc(100% - var(--pmq-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--pmq-fade), #000 calc(100% - var(--pmq-fade)), transparent 100%);
}

.pmq *,
.pmq *::before,
.pmq *::after { box-sizing: border-box; }

/* --- rows ---------------------------------------------------------------- */

.pmq__row {
  position: absolute;
  left: 50%;
  width: 100%;          /* keeps the duplicated track longer than the frame */
  display: flex;
}

.pmq__row--top {
  top: var(--pmq-row-offset);
  transform: translateX(-50%) rotate(var(--pmq-tilt));
}

.pmq__row--bottom {
  bottom: var(--pmq-row-offset);
  transform: translateX(-50%) rotate(calc(var(--pmq-tilt) * -1));
}

/* --- the moving track ---------------------------------------------------- */

.pmq__track {
  display: flex;
  flex: 0 0 auto;            /* stops flexbox squashing the cards */
  width: max-content;
  animation: pmq-scroll var(--pmq-speed) linear infinite;
  will-change: transform;
}

/* Second row travels the other way. */
.pmq__row--bottom .pmq__track { animation-direction: reverse; }

.pmq:hover .pmq__track { animation-play-state: running; }

@keyframes pmq-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- cards --------------------------------------------------------------- */

.pmq__card {
  position: relative;
  flex: 0 0 auto;
  width: var(--pmq-card-w);
  height: var(--pmq-card-h);
  /* margin, not gap: the loop maths only lines up if the trailing space
     after the last card matches the space between cards. */
  margin: 0 var(--pmq-gap) 0 0;
  border-radius: var(--pmq-radius);
  overflow: hidden;
  background: #e2e0da;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  transform: translateZ(0);      /* keeps Safari clipping the radius cleanly */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.pmq__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  -webkit-user-select: none;
          user-select: none;
}

.pmq__card:hover img { transform: scale(1.06); }

/* --- name tag ------------------------------------------------------------ */

.pmq__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 10px;
  border-radius: 12px;
  font: 600 12px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #16150f;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 700px) {
  .pmq {
    --pmq-card-w: 210px;
    --pmq-card-h: 145px;
    --pmq-gap: 14px;
    --pmq-band-h: 520px;
    --pmq-row-offset: 90px;
    --pmq-radius: 14px;
    --pmq-fade: 8%;
  }
}

/* --- motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pmq__track { animation: none; }
  .pmq__card img { transition: none; }
  .pmq__card:hover img { transform: none; }
}
.empty {
  height: 90vh;
  position: relative;
}

#lamp {
  height: 300px;
  position: absolute;
  top: 25%;
}

#ump {
  width: 30vw ;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%) translateX(50%);
  z-index: 1000;
  animation: circle 20s linear 10ms infinite;
}

@keyframes circle {
  from {
    transform: translateY(-50%) translateX(50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) translateX(50%) rotate(-360deg);
  }
}


input[type="email"]:focus,
#submit:focus {
    outline: none;
}

    html {
    scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
#text {
    color: #FFF8ED;

    text-shadow:
        0 0 3px #ffffff,
        0 0 45px rgba(236, 55, 80, 0.45);
}

#rail {
  position: absolute;
  top: 38vh;
  width: 85%;
}

[data-aos="leftright"]{
  position: absolute;
  top: 25%;
  left: 0vw;
  opacity: 0;
}

[data-aos="leftright"].aos-animate{
  position: absolute;
  top: 25%;
  opacity: 1;
  left: 10vw;
}

.ship {
  height: 85vh;
  position: relative;
}

.ninja {
  width: 100vw ;
  user-select: none;
}
.hours {
  font-family: outfit;
  position: absolute;
  top: 2vh;
  font-size: 10vw;
  left: 33vw;

  color: #ec3750;

}

section {
  position: relative;
}

#rail2 {
  position: absolute;
  top: 95vh;
  right: -20vh;
  width: 85%;
  transform: rotate(45deg);
  z-index: -1;
}


.fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.4s ease-out forwards;
    animation-delay: 0.4s;

}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.fade-up-del {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.2s linear forwards;
    animation-delay: 0.9s;
}
.hourp {
  font-family: outfit;
  position: absolute;
  top: 34vh;
  font-size: 1.4vw;
  left: 28vw;
  right: 20vw;

  color: #ec3750;
}

.hourp1 {
  font-family: outfit;
  position: absolute;
  top: 36vh;
  font-size: 1.4vw;
  left: 28vw;
  right: 20vw;

  color: #ec3750;
}

.hourp2 {
  font-family: outfit;
  position: absolute;
  top: 41vh;
  font-size: 1.4vw;
  left: 28vw;
  right: 20vw;

  color: #ec3750;
}